<style type="text/css">
    .kjcx div{
        background: url('img/01.png') no-repeat;
        background-position:center;  
        background-size:60%
    }


.kjcx .kjcx1{
    background: url('img/01.png') no-repeat;
      background-position:center;  
        background-size:60%
}
.kjcx .kjcx2{
    background: url(img/02.png) no-repeat;
      background-position:center;  
        background-size:60%
}
.kjcx .kjcx3{
    background: url(img/03.png) no-repeat;
      background-position:center;  
        background-size:60%
}
.kjcx .kjcx4{
    background: url(img/04.png) no-repeat;
      background-position:center;  
        background-size:60%
}
.kjcx .kjcx5{
    background: url(img/05.png) no-repeat;
      background-position:center;  
        background-size:60%
}
.kjcx .kjcx6{
    background: url(img/06.png) no-repeat;
      background-position:center;  
        background-size:60%
}

.kjcx .kjcx1:hover{
       background: url('img/011.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:68%
}
.kjcx .kjcx2:hover{
   background: url('img/022.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:68%
}
.kjcx .kjcx3:hover{
   background: url('img/033.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:68%
}
.kjcx .kjcx4:hover{
    background: url('img/044.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:68%
}
.kjcx .kjcx5:hover{
    background: url('img/055.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:68%
}
.kjcx .kjcx6:hover{
   background: url('img/066.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:68%
}

 @media (max-width: 767px) {

    .kjcx div{
        background: url('img/01.png') no-repeat;
        background-position:center;  
        background-size:80%
    }


.kjcx .kjcx1{
    background: url('img/01.png') no-repeat;
      background-position:center;  
        background-size:70%
}
.kjcx .kjcx2{
    background: url(img/02.png) no-repeat;
      background-position:center;  
        background-size:70%
}
.kjcx .kjcx3{
    background: url(img/03.png) no-repeat;
      background-position:center;  
        background-size:70%
}
.kjcx .kjcx4{
    background: url(img/04.png) no-repeat;
      background-position:center;  
        background-size:70%
}
.kjcx .kjcx5{
    background: url(img/05.png) no-repeat;
      background-position:center;  
        background-size:70%
}
.kjcx .kjcx6{
    background: url(img/06.png) no-repeat;
      background-position:center;  
        background-size:70%
}

.kjcx .kjcx1:hover{
       background: url('img/011.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:88%
}
.kjcx .kjcx2:hover{
   background: url('img/022.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:88%
}
.kjcx .kjcx3:hover{
   background: url('img/033.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:88%
}
.kjcx .kjcx4:hover{
    background: url('img/044.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:88%
}
.kjcx .kjcx5:hover{
    background: url('img/055.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:88%
}
.kjcx .kjcx6:hover{
   background: url('img/066.png') no-repeat;
      background-position:center;  
        transition: All 0.5s ease;
        background-size:88%
}
.kjcx .pt5{
    padding-top: 2%;
    
}
    }
    
    @media only screen and (max-width: 1300px) and (min-width: 1024px) {
}

.p_MatteIcon .iconfont:before {
    content: '\e602';
}

>div {
    animation-fill-mode: both;
}

.wyz {
    position: fixed;
    right: 2px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 50px 0;
    height: 482px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 99;
}

.wyz-form.cur {
    width: 200px;
    opacity: 1;
}

.wyz .transition {
    -webkit-transition-duration: .8s;
    -moz-transition-duration: .8s;
    -o-transition-duration: .8s;
    transition-duration: .8s;
}

.wyz .wyz-title {
    background-color: rgba(32, 176, 159, .8);
    color: #fff;
    padding: 15px 20px 0;
    white-space: nowrap;
    position: relative;
}

.wyz .wyz-title .cf-close {
    position: absolute;
    left: 166px;
    top: 0;
    padding: 10px;
}

.wyz-item-block {
    position: absolute;
    right: 0;
    width: 70px;
    height: 70px;
    background-color: #494846;
    border: 0px solid #20b09f;
    border-right: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.wyz-item-block:nth-child(1) {
    top: 50px;
}

.wyz-item-block:nth-child(2) {
    top: 122px;
}

.wyz-item-block:nth-child(3) {
    top: 194px;
    -webkit-transition-duration: .8s;
    -moz-transition-duration: .8s;
    -o-transition-duration: .8s;
    transition-duration: .8s;
}

.wyz-item-block:nth-child(4) {
    top: 266px;
}

.wyz-item-block:nth-child(5) {
    top: 362px;
}

.wyz-item {
    width: 100%;
    height: 100%;
}

.wyz-item-p {
    color: #fff;
    font-size: 12px;
    margin-top: 5px;
}

.wyz-item-in {
    height: 100%;
    display: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.wyz-item-in-p {
    color: #fff;
    text-align: center;
    line-height: 68px;
    height: 68px;
    white-space: nowrap;
}

.wyz-in.cur {
    width: 156px;
    background-color: transparent;
}

.wyz-in.cur .wyz-item-in {
    width: 100%;
    display: block;
}

.wyz-in.cur .wyz-item {
    display: none;
}

.wyz-in:before {
    content: "";
    background-color: #3487E6;
    position: absolute;
    height: 100%;
    width: 0;
    -webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
    -moz-transition: all .8s ease;
    transition: all .8s ease;
}

.wyz-in.cur:before {
    width: 100%;
}

.wyz-item-block.wyz-top {
    display: none;
    cursor: pointer;
    width: 46px;
    height: 46px;
    top: 480px;
}

.wyz-item-block.wyz-top .wyz-item-p {
    font-size: 14px;
    margin-top: 0;
}

.wyz-in.wyz-search.cur {
    border-left: none;
}

.wyz-form {
    position: absolute;
    width: 0;
    right: 156px;
    bottom: -1px;
    z-index: 999;
    overflow: hidden;
    opacity: 0;
}

.wyz-form .cf-form {
    background-color: rgba(32, 176, 159, .8);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px 20px;
    border-bottom: 1px solid #20b09f;
}

.wyz-form .cf-form-item {
    margin-bottom: 10px;
    font-size: 0;
    white-space: nowrap;
}

.wyz-form .cf-form-item:last-of-type {
    margin: 0;
}

.wyz-form input {
    padding: 0 8px;
    margin: 0;
    border: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 160px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
}

.wyz-form .verify {
    width: 86px;
    margin-right: 5px;
}

.wyz-form .submit {
    width: 160px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
}

.wyz-qr-show {
    display: none;
    position: absolute;
    z-index: 1;
    border: 0px solid rgba(32, 176, 159, .8);
    left: -165px;
    top: -91px;
}

.flex-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.zxcp img {
    margin-top: 84px;
}

@media only screen and (max-width: 768px) {
    .img-block {
        text-align:center;
    }

    .img-block img {
        width: 80%;
    }

    .wyz-item-block {
        width: 60px!important;
        height: 60px!important;
    }

    .wyz {
        display: none;
    }
}

</style>
<div class="wyz" style="height: 576px;">
  <!-- 在线咨询 -->
  <div class="wyz-item-block wyz-in transition wyz-online">
    <!-- 注意修改 链接 -->
    <a href="/index.php" class="shangqiao a_baidu_window zixun_count" zixun="bd" target="_self">
      <div class="wyz-item flex-col">
        <div class="img-block">
<img src="/img/ws30.png" alt="icon">
        </div>
        <p class="wyz-item-p zixun_count" zixun="bd">首页
        </p>
      </div>
      <div class="wyz-item-in">
        <p class="wyz-item-in-p transition zixun_count" zixun="bd">返回首页
        </p>
      </div>
    </a>
  </div>
  <!-- QQ咨询 -->
  <div class="wyz-item-block wyz-in transition wyz-qq job_day_hidden">
    <!-- 注意修改 链接 -->
    <a class="qq a_new_window zixun_count" zixun="qq" target="_blank">
      <div class="wyz-item flex-col">
        <div class="img-block">
       <img src="/img/sd1.png" alt="icon">
        </div>
        <p class="wyz-item-p zixun_count" zixun="qq">服务咨询
        </p>
      </div>
       <div class="wyz-item-in">
        <p class="wyz-item-in-p transition flex-col" style="line-height: normal;">
       服务咨询
        </p>
      </div>
    <div class="wyz-qr-show zxcp" style="display: none;">
      <div class="img-block">
<!--<img src="/img/cv2.png" alt="icon">-->
      </div>
    </div>
    </a>
  </div>
  <!-- 电话沟通 -->
  <div class="wyz-item-block wyz-in transition wyz-tel">
    <a href="tel:400-696-4936" target="_blank">
      <div class="wyz-item flex-col">
        <div class="img-block">
        <img src="/img/ws32.png" alt="dh">
        </div>
        <p class="wyz-item-p">服务电话
        </p>
      </div>
      <div class="wyz-item-in">
        <p class="wyz-item-in-p transition"><?php echo  $cfg_tel ;?>
        </p>
      </div>
    </a>
  </div>
  <!-- 微信咨询 -->
<!--  <div class="wyz-item-block wyz-in transition wyz-wx">-->
<!--    <a href="javascript:void(0);">-->
<!--      <div class="wyz-item flex-col">-->
<!--        <div class="img-block">-->
<!--          <img src="/img/ws33.png" alt="icon">-->
<!--        </div>-->
<!--        <p class="wyz-item-p">公众号-->
<!--        </p>-->
<!--      </div>-->
<!--      <div class="wyz-item-in">-->
<!--        <p class="wyz-item-in-p transition flex-col" style="line-height: normal;">-->
<!--          扫一扫-->
<!--          <br>了解更多-->
<!--        </p>-->
<!--      </div>-->
<!--    </a>-->
<!--    <div class="wyz-qr-show zxcp1" style="display: none;">-->
<!--      <div class="img-block">-->
<!--<img src="/img/cv22.png" alt="icon">-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
  <!-- 回到顶部 -->
  <div class="wyz-item-block wyz-top" style="display: block;">
    <div class="wyz-item flex-col">
      <div class="img-block">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23px" height="13px">
          <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M23.013,12.996 L11.501,1.656 L-0.011,12.996 L-0.011,11.359 L11.501,0.018 L23.013,11.359 L23.013,12.996 Z">
          </path>
        </svg>
      </div>
      <p class="wyz-item-p">TOP
      </p>
    </div>
  </div>
</div>

<div style="width: 100%" class="mt-5 footer"></div>
<div style="background-color: #fff; width:100%">
<div class="container" style="background-color: #fff">
        <div class="row justify-content-center">
            
            <div class="col-md-12 ">
                <div class="row kjcx" style="display: none;">
                <div class="col-4 col-md-2 p4 pt5 mt1 kjcx1"><img src="img/zw.png"></div>
                <div class="col-4 col-md-2 p4 pt5 mt1 kjcx2"><img src="img/zw.png"></div>
                <div class="col-4 col-md-2 p4 pt5 mt1 kjcx3"><img src="img/zw.png"></div>
                <div class="col-4 col-md-2 p4 pt5 mt1 kjcx4"><img src="img/zw.png"></div>
                <div class="col-4 col-md-2 p4 pt5 mt1 kjcx5"><img src="img/zw.png"></div>
                <div class="col-4 col-md-2 p4 pt5 mt1 kjcx6"><img src="img/zw.png"></div>

             </div>

            </div>
        </div>


</div></div>
<div id="footerdiv" style="width:100%;background-color:#3487E6;background-size:100% 100%;overflow: hidden;padding-top:20px;padding-bottom: 50px; color: #fff">

    <style>
       .footnav a{
        color: #fff;
        padding:0 20px;
        font-size: 1.2rem
       
       }
         .footnav p{
            margin: 10px;
         }
    </style>
        <div class="container " style="padding: 20px; overflow:hidden">
            <div class="row">
            <div class="footerleft2 col-md-4 col-12" >
                <p style="margin-bottom: 3%; color: #fff; font-size:2rem; font-weight: bold;">安阳市智道传媒有限公司</p>
                <p><?php echo "咨询热线：".$cfg_hotline ;?> </p>
                 <p> 服务热线：<?php echo  $cfg_tel ;?> </p>
                 <p>邮箱：<?php echo $cfg_email; ?> </p>
                <p>地址：<?php echo $cfg_dizhi; ?> </p>
               
            </div>

            <div class="col-md-4 footnav hidden-xs">
                
                <p><a style="" href="/index.php">> 网站首页</a><a href="news.php">> 新闻资讯</a></p>
                <p><a href="product.php">> 产品服务</a><a href="case.php">> 案列展示</a></p>
                <p><a href="contact.php">> 联系我们</a></p>
            </div>
          
          <div class="col-md-2 col-4 hidden-xs">
              <img src="hg/img/ewm.png" style="width:100px"> <img src="">


          </div></div>
        </div>

</div>


<script>
  $(function() {

    // 回到顶部的显示与隐藏
    $(window).on("load scroll",function() {
      var top = $(document).scrollTop(),
        wHeight = $(window).height();
      if (top > wHeight) {
        $(".wyz-top").fadeIn("fast");
        $(".wyz").css({
          "height": 576
        });
      } else {
        $(".wyz-top").hide();
        $(".wyz").removeAttr("style");
      }
    });
    // 回到顶部
    $(".wyz-top").on("click",function() {
      $("html,body").stop().animate({
        scrollTop: 0
      },500);
    });

 


      // 响应式
      if (0) {
        //  移动端要做的事
        $(".wyz-in").on("touchstart ",function(event) {
          $(this).addClass("cur").siblings(".wyz-in").removeClass("cur");
          if ($(".wyz-wx").hasClass("cur")) {
            $(".zxcp1").fadeIn("fast");
          } else {
            $(".zxcp1").fadeOut("fast");
          }
          event.stopPropagation()
        })

        // 微信二维码的显示与隐藏
        $(".wyz-wx").on("touchstart ",function(event) {
          console.log('执行了')

          $(this).addClass("cur").siblings(".wyz-in").removeClass("cur");
          setTimeout(function() {
            if ($(".wyz-wx").hasClass("cur")) {
              $(".zxcp1").fadeIn("fast");
            }
          },600);

          event.stopPropagation()
        })
      $(".wyz-qq").on("touchstart ",function(event) {
          console.log('执行了')

          $(this).addClass("cur").siblings(".wyz-in").removeClass("cur");
          setTimeout(function() {
            if ($(".wyz-qq").hasClass("cur")) {
              $(".zxcp").fadeIn("fast");
            }
          },600);

          event.stopPropagation()
        })


        // 页面滚动
        $(document).scroll(function() {

          $(".zxcp1").fadeOut("fast");
          $(".wyz-in").removeClass("cur");
        })
      } 
      if(1){
        // pc端 || pad端要做的事
        // 侧边栏滑出
        $(".wyz-in").on("mouseenter",function() {
          $(this).addClass("cur").siblings(".wyz-in").removeClass("cur");
        }).on("mouseleave",function() {
          $(this).removeClass("cur");
        });
        // 微信二维码的显示与隐藏
        $(".wyz-wx").on("mouseenter",function() {
          console.log('执行了')

          $(this).addClass("cur").siblings(".wyz-in").removeClass("cur");
          setTimeout(function() {
            if ($(".wyz-wx").hasClass("cur")) {
              $(".zxcp1").fadeIn("fast");
            }
          },600);
        }).on("mouseleave",function() {
          $(this).removeClass("cur");
          $(".zxcp1").fadeOut("fast");
        });
        $(".wyz-qq").on("mouseenter",function() {
          console.log('执行了')

          $(this).addClass("cur").siblings(".wyz-in").removeClass("cur");
          setTimeout(function() {
            if ($(".wyz-qq").hasClass("cur")) {
              $(".zxcp").fadeIn("fast");
            }
          },600);
        }).on("mouseleave",function() {
          $(this).removeClass("cur");
          $(".zxcp").fadeOut("fast");
        });
     

  
}
    
    
   $(window).bind("scroll",function(){
    var _wTop = _winScroll = windowPos = $(window).scrollTop();
  	
    if( _wTop>10 && window.innerWidth<1024){
		$('.wyz').hide();
    }else{
		$('.wyz').show();
    }
});


    
    
    
    
    
    

  });
</script>

</body>
</html>